<script setup lang="ts">
import { Refresh } from "@element-plus/icons-vue";
import axios, { isAxiosError } from "axios";
import { ElButton, ElIcon, ElMessage, ElTooltip } from "element-plus";
import { onMounted, ref } from "vue";
import { router } from "../../router";
import type { Book } from "../../types/Book";
import type { ResultContext } from "../../types/ResultContext";

const DEFAULT_COUNT_FETCH_BOOKS = 6;
const DEFAULT_COUNT_FETCH_TRENDING_BOOKS = 12;
const DEFAULT_COUNT_FETCH_MOST_FAVORITED_BOOKS = 12;

const recommendBooks = ref<Book[]>([]);
const borrowingBooks = ref<Book[]>([]);
const collectionBooks = ref<Book[]>([]);
const spinning = ref(false);

// 从后端拿取book数据 获取推荐书籍
async function fetchBooks() {
  try {
    const response = await axios.get<ResultContext<Book[]>>(
      "http://localhost:8080/api/books/recommendations/random",
      {
        params: { count: DEFAULT_COUNT_FETCH_BOOKS },
      },
    );
    recommendBooks.value = response.data.data;
  } catch (error) {
    if (isAxiosError(error)) {
      ElMessage.error(error.message);
    } else {
      ElMessage.error("网络异常。");
    }
  }
}

// 从后端拿取根据借阅量从大到小排序的book数据
async function fetchBorrowingBooks() {
  try {
    const response = await axios.get<ResultContext<Book[]>>(
      "http://localhost:8080/api/books/trending/borrowing",
      {
        params: { count: DEFAULT_COUNT_FETCH_TRENDING_BOOKS },
      },
    );
    borrowingBooks.value = response.data.data;
  } catch (error) {
    if (isAxiosError(error)) {
      ElMessage.error(error.message);
    } else {
      ElMessage.error("网络异常。");
    }
  }
}

//从后端拿取根据收藏从大到小排序的book数据
async function fetchCollectionBooks() {
  try {
    const response = await axios.get<ResultContext<Book[]>>(
      "http://localhost:8080/api/books/trending/favorites",
      { params: { count: DEFAULT_COUNT_FETCH_MOST_FAVORITED_BOOKS } },
    );
    collectionBooks.value = response.data.data;
  } catch (error) {
    if (isAxiosError(error)) {
      ElMessage.error(error.message);
    } else {
      ElMessage.error("网络异常。");
    }
  }
}

onMounted(() => {
  void fetchBooks();
  void fetchBorrowingBooks();
  void fetchCollectionBooks();
});

function spinOnce() {
  spinning.value = false;
  setTimeout(() => {
    spinning.value = true;
    void fetchBooks();
  }, 0);
}
function goDetails(book: Book) {
  void router.push(`/details/${book.id}`);
}
</script>

<template>
  <div class="content">
    <div class="borrowing">
      <div class="title">
        <span style="margin-left: 10px">借阅榜</span>
        <span style="margin-right: 10px">借阅量</span>
      </div>
      <div class="borrowList">
        <div
          class="book"
          v-for="(book, index) in borrowingBooks"
          :key="index"
          @click="goDetails(book)"
        >
          <span style="margin-left: 10px">{{ book.title }}</span>
          <span style="margin-right: 30px">{{ book.borrowCount }}</span>
        </div>
      </div>
    </div>
    <div class="recommend">
      <div class="title">
        <span>猜您喜欢</span>
        <ElTooltip content="换一批">
          <ElButton circle size="large" @click="spinOnce">
            <template #icon>
              <ElIcon :size="24">
                <Refresh :class="{ spinning }" class="refresh" />
              </ElIcon>
            </template>
          </ElButton>
        </ElTooltip>
      </div>
      <div class="recommendList">
        <div
          class="book"
          v-for="(book, index) in recommendBooks"
          :key="index"
          @click="goDetails(book)"
        >
          <div class="bookInfo">
            <img :src="`/img/${book.img}`" />
            <div class="textInfo">
              <span class="title">{{ book.title }}</span>
              <span class="author">{{ book.author }}</span>
              <span class="description">{{ book.description }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="collection">
      <div class="title">
        <span style="margin-left: 10px">收藏榜</span>
        <span style="margin-right: 10px">收藏量</span>
      </div>
      <div class="collectList">
        <div
          class="book"
          v-for="(book, index) in collectionBooks"
          :key="index"
          @click="goDetails(book)"
        >
          <span style="margin-left: 10px">{{ book.title }}</span>
          <span style="margin-right: 30px">{{ book.favoriteCount }}</span>
        </div>
      </div>
    </div>
  </div>
  <div class="ad">
    <span style="font-size: 50px; font-weight: bold">广告位招租</span>
  </div>
</template>

<style scoped>
.content {
  width: 90%;
  max-width: 1200px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: row;
  gap: 32px;
  padding-bottom: 120px; /* 为底部广告留出空间 */
}

/* 借阅榜样式 */
.borrowing {
  flex: 1;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.borrowing:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.borrowing .title {
  background: linear-gradient(135deg, #409eff 0%, #53c0ff 100%);
  color: white;
  padding: 20px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
}

.borrowing .title span {
  margin: 0 !important;
}

.borrowList {
  padding: 0;
}

.borrowList .book {
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}

.borrowList .book span {
  margin: 0 !important;
}

.borrowList .book:last-child {
  border-bottom: none;
}

.borrowList .book:hover {
  background: #f8faff;
  color: #409eff;
  transform: translateX(4px);
}

/* 推荐区域样式 */
.recommend {
  flex: 2.5;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.recommend:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.recommend .title {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  color: white;
  padding: 20px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
}

/* Element Plus 按钮样式覆盖 */
.recommend .title .el-button {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.recommend .title .el-button:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

.recommend .title .el-button:focus {
  background: rgba(255, 255, 255, 0.15) !important;
}

.spinning {
  animation: rotating 0.8s ease-out;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

.recommendList {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.recommendList .book {
  background: white;
  border-radius: 12px;
  padding: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid #e0e0e0;
  min-height: 160px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
}

.recommendList .book:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: #67c23a;
}

.bookInfo {
  display: flex;
  gap: 12px;
  height: 130px;
  align-items: flex-start;
  width: 100%;
}

.bookInfo img {
  width: 80px;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.textInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  justify-content: center;
  padding: 0;
  height: 100%;
}

.textInfo .title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  background: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.textInfo .author {
  font-size: 13px;
  color: #67c23a;
  font-weight: 500;
  background: none;
  margin: 0;
  padding: 0;
  text-align: left;
  line-height: 1.2;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}

.textInfo .description {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
  margin: 0;
  padding: 0;
  text-align: left;
  word-break: break-word;
  height: 84px; /* 1.4 * 12px * 5行 = 84px，固定高度 */
}

/* 收藏榜样式 */
.collection {
  flex: 1;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.collection:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.collection .title {
  background: linear-gradient(135deg, #f56c6c 0%, #ff8a8a 100%);
  color: white;
  padding: 20px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  margin: 0;
}

.collection .title span {
  margin: 0 !important;
}

.collectList {
  padding: 0;
}

.collectList .book {
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}

.collectList .book span {
  margin: 0 !important;
}

.collectList .book:last-child {
  border-bottom: none;
}

.collectList .book:hover {
  background: #fff5f5;
  color: #f56c6c;
  transform: translateX(4px);
}

/* 广告区域样式 */
.ad {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1200px;
  height: 80px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  z-index: 100;
}

.ad span {
  font-size: 24px !important;
  font-weight: 600 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .content {
    flex-direction: column;
    gap: 24px;
  }

  .recommendList {
    grid-template-columns: 1fr;
  }

  .bookInfo {
    height: 120px;
    align-items: flex-start;
  }

  .textInfo {
    height: 100%;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .content {
    width: 95%;
    gap: 20px;
  }

  .recommendList {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }

  .bookInfo {
    height: 110px;
    align-items: flex-start;
  }

  .bookInfo img {
    width: 70px;
  }

  .textInfo {
    height: 100%;
    justify-content: center;
  }

  .recommendList .book {
    min-height: 130px;
    padding: 14px;
  }

  .ad span {
    font-size: 18px;
  }
}
</style>
